<template>
  <div class="session-wrap">
  <!--    <el-dialog 
      title="占位单图"
      :visible.sync="SinglEMapDialogVisible"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"> -->
      <div style="text-align: left;">
        <el-upload
          :action="imgUpload"
          :file-list="singlList"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="singlSuccess"
          :on-remove="handleRemove"
          :limit="1">
          <i class="el-icon-plus"></i>
        </el-upload>

        <div slot="footer" class="dialog-footer">
          <el-button @click="close()" size="mini">取消</el-button>
          <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
        </div>
      </div>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
  // 引入资源
  export default {
    name: 'session',
    props: {
      moduleId: {
        type: String
      },
      singlList: {
        type: Array,
        default: []
      },
      SinglEMapDialogVisible:{
        type:Boolean
      }

    },
    data() {
      return {                          // 是否显示单图上传
        imgUpload: this.utils.imgUploadUrl,          // 上传图片地址
        dialogVisible: false,                                         // 是否显示查看图片
      }
    },

    methods: {

      // 上传图片保存信息
      saveSinglEMapConf(){
        let imgUlrList = this.singlList;
        imgUlrList.forEach(item=>{
          item.imgUrl = item.url;
        })
        this.utils.request.cmsPageModuleAddModuleData({templateDataType:0,moduleId:this.moduleId,variablesObject:imgUlrList},res=>{
          if(res.code == "0000"){
            // this.SinglEMapDialogVisible=false
            this.$emit('SinglEMapDialogVisibleFun')
            this.$emit('getIndex');
            this.$message({"message":"保存成功",type:"success"});
          }else{
            this.$message({"message":res.msg,type:"error"});
          }
        })
      },

      // 图片回显  handlePictureCardPreview
       handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },


      // 删除已上传的图片  handleRemove
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
        


      // 上传成功后回调
      singlSuccess(file){
        this.singlList.push({url:file.data.imgUrl})
      },
      close(){
        // this.SinglEMapDialogVisible=false
        this.$emit('SinglEMapDialogVisibleFun')
      }

    },

    mounted() {
      // 格式化list格式
      if(this.singlList && this.singlList.length > 0){
        this.singlList.forEach(item=>{
          // imgUrlList.push({url:item.imgUrl})
          item.url = item.imgUrl;
        })
      }
      
    },
  }
</script>
<style lang="scss" scoped>
  .session-wrap {
    width: 100%;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
    .session-image-wrap {
      width: 100%;
      height: 125px;
      margin-bottom: 10px;
      .session-image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
